const { PureComponent } = require("react");


// 调用 foo([1,2]) 得到fn函数 是一个高阶函数，高阶组件，纯函数
// foo([1,2])(DemoA)
// function foo(arr) {
//   return function fn(WraperComponent) {
//     return props => (
//       <div>
//         <header>头部</header>
//         <WraperComponent></WraperComponent>
//         <footer>底部</footer>
//       </div>
//     )
//   }
// }

// function foo(arr) {
//   return WraperComponent => {
//     return props => (
//       <div>
//         <header>头部</header>
//         <WraperComponent></WraperComponent>
//         <footer>底部</footer>
//       </div>
//     )
//   }
// }


// 箭头函数如果连用，代码的可读性是不强的
// function foo(arr) {
//   return WraperComponent => props => (
//     <div>
//       <header>头部</header>
//       <WraperComponent></WraperComponent>
//       <footer>底部</footer>
//     </div>
//   )
// }


// 箭头函数如果连用，代码的可读性是不强的
let foo = arr => WraperComponent => props => (
  <div>
    <header>头部</header>
    <WraperComponent></WraperComponent>
    <footer>底部</footer>
  </div>
)

// 定义高阶组件：
//   方式一： const hoc = (WC)=>props=>(jsx)  使用：hoc(DemoA)
//   方式二： const hoc = (...arg)=>(WC)=>props=>(jsx)  使用：hoc(1,2)(DemoA)


class DemoA extends PureComponent {
  render() {
    return (
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}

export default foo([1, 2])(DemoA);